var app = new Vue({
    el: "#article",
    data: {
        article: [],
        flag: true
    },
    methods: {
        update(){
            this.$forceUpdate();
        },
        showarticle(index){
            $.ajax({
                url: "/article/showArticle",
                method: "post",
                data:{
                    "articleUrl" : app.article[index].articleUrl,
                    "articleId" : app.article[index].articleId
                },
                success: function (res){
                    if(res.code==200){
                        $("#title").text(app.article[index].articleTitle);
                        $("#content").html(res.data["article"]);
                        app.flag = false;
                        articleVue.flag=true;
                        openarticleid = app.article[index].articleId;
                        if(res.data["flag"]){
                            $("#great").css("color","#d91010");
                        }
                        app.update();
                        articleVue.update();
                    }else{
                        layui.use('layer',function (){
                            let layer = layui.layer;
                            layer.msg(res.msg,{
                                icon: 2
                            })
                        })
                    }
                }
            })
        },
        deleteArticle(index){
            $.ajax({
                url: "/article/deleteArticle",
                method: "post",
                data:{
                    "articleId" : app.article[index].articleId
                },
                success: function (res){
                    if(res.code===200){
                        window.location.reload();
                    }else{
                        layui.use('layer',function (){
                            let layer = layui.layer;
                            layer.msg(res.msg,{
                                icon: 2
                            })
                        })
                    }

                }
            })
        }
    }
});
var articleVue = new Vue({
    el: "#showarticle",
    data: {
        flag: false
    },
    methods: {
        update(){
            this.$forceUpdate();
        },
        back(){
            app.flag = true;
            articleVue.flag = false;
            app.update();
            articleVue.update();
        },
        great(){
            console.log($("#collection").css("color"));
            if($("#great").css("color")=="rgb(21, 11, 11)"){
                $.ajax({
                    url: "/article/addArticleGreat",
                    method: "post",
                    data: {
                        "greatArticleId" : openarticleid
                    },
                    success: function (res){
                        if(res.code===200){
                            $("#great").css("color","#d91010");
                            app.update();
                            articleVue.update();
                        }else{
                            layui.use('layer',function (){
                                let layer = layui.layer;
                                layer.msg(res.msg,{
                                    icon: 2
                                })
                            })
                        }
                    }
                })
            }else{
                $.ajax({
                    url: "/article/deleteArticleGreat",
                    method: "post",
                    data: {
                        "deleteGreatArticleId" : openarticleid
                    },
                    success: function (res){
                        if(res.code===200){
                            $("#great").css("color","#150b0b");
                            app.update();
                            articleVue.update();
                        }else{
                            layui.use('layer',function (){
                                let layer = layui.layer;
                                layer.msg(res.msg,{
                                    icon: 2
                                })
                            })
                        }
                    }
                })
            }

        }
    }
})
$(function (){
    $.ajax({
        url: "/article/showMyArticleList",
        method: "post",
        data: {},
        success: function (res){
            if(res.code==200){
                for(let i =0;i<res.data.length;i++){
                    app.article.push(res.data[i]);
                }
                app.update();
            }else{
                layui.use('layer',function (){
                    let layer = layui.layer;
                    layer.msg(res.msg,{
                        icon: 2
                    })
                })
            }
        }
    })
})

